<template>
	<div class="group-selfCreated">
		<div class="title-name title-border clear">
			<div class="title-name-l fl">
				<router-link to="/group/manage/selfCreated">我创建的圈组</router-link>
				<!-- 学校才有审批 -->
				<router-link to="/group/manage/approval" v-if="isSchool">成员审批</router-link>
			</div>
			<div class="title-name-r fr">
				<router-link to="/group/groupAdd">创建圈组</router-link>
			</div>
		</div>
		<div class="teacher-train" v-loading="loading">
			<ul>
				<li class="teacher-train-list clear" v-for="item of groupListData" :key="item.id">
					<router-link v-if="item.status==1" :to="{path: '/group/introduct', query: {id: item.id}}" class="train-list-cover fl">
						<img :src="BASE_URL+item.picture" :onerror="errorImg">
					</router-link>
					<a href="#" class="train-list-cover fl" v-else>
						<img :src="BASE_URL+item.picture" :onerror="errorImg">
					</a>
					<div class="train-list-content">
						<div class="train-list-title clear">
							<p>{{item.name}}</p>
							<!-- <router-link :to="{path: '/', query: {id: item.id}}">{{item.name}}</router-link> -->
							<div class="train-list-operation fr">
								<el-popover placement="bottom" width="120" popper-class="ioperation_hover" trigger="hover">
									<ul class="r_ioperation">
										<li v-if="item.status==2">审核中</li>
										<li v-if="item.status==4" @click="openGroup(item.id)">开启</li>
										<li v-if="item.status==1">
											<router-link :to="{path: '/group/manageOne', query: {id: item.id}}">管理圈组</router-link>
										</li>
										<li v-if="item.status==1" @click="showcloseDialog(item.id)">关闭圈组</li>
										<li v-if="item.status!=2" @click="removeGroup(item.id)">删除</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
						<div class="train-list-label">
							<span>{{item.grade_name}}</span>
							<span>{{item.subject_name}}</span>
						</div>
						<div class="train-list-info">
							<span :style="{'color':getStatus(item.status,1)}" v-html="getStatus(item.status,0)"></span>
							<span>
								创建时间:
								<i>{{item.create_time}}</i>
							</span>
						</div>
						<div class="i_grouplTxt_xm clear">
							<span>
								<i class="ipng quanzu_icon06"></i>
								<i>成员 : {{item.u_count}}</i>
							</span>
							<span>
								<i class="ipng quanzu_icon07"></i>
								<i>公告 : {{item.news_count}}</i>
							</span>
							<span>
								<i class="ipng quanzu_icon08"></i>
								<i>教案 : {{parseInt(item.res_count)+parseInt(item.video_count)+parseInt(item.test_count)}}</i>
							</span>
						</div>
					</div>
				</li>
			</ul>
			<el-pagination background v-if="total_number > page_size" class="pageing" @current-change="currentChange"
			 :current-page="page_index" :page-size="page_size" layout="total, prev, pager, next, jumper" :total="total_number">
			</el-pagination>
		</div>
		<el-dialog title="关闭理由" :visible.sync="groupDialogVisible" width="400px">
			<el-row label="课程简介" class="group-selfCreated-textarea">
				<el-input type="textarea" :rows="5" resize="none" v-model.trim="closeReason" maxlength="100" placeholder="在此输入关闭理由,不超100字">
				</el-input>
				<span class="numberWord">
					<i>{{ closeReason.length }}</i>/100</span>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain size="small" @click="groupDialogVisible = false">取 消</el-button>
				<el-button type="primary" size="small" @click="sureCloseGroup">确 定</el-button>
			</span>
		</el-dialog>
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page_index: 1,
				page_size: this.$g.page_size,
				total_number: 0,
				placeholder: false,
				groupListData: [],
				loading: true,
				errorImg: 'this.src="' +
					require("../../../../public/images/image_loding.png") +
					'"',
				orderby: "time",
				statusArr: {
					1: {
						name: "已通过",
						color: "#33BBBB"
					},
					2: {
						name: "审核中",
						color: "#E6A23C"
					},
					3: {
						name: "未通过",
						color: "#909399"
					},
					4: {
						name: "已关闭",
						color: "#F56C6C"
					}
				},
				groupDialogVisible: false,
				closeReason: "",
				closeID: null,
			};
		},
		created() {
			this.get_groupList();
		},
		computed: {
			isMulti() {
				return this.$store.getters.isMulti;
			},
			isSchool(){
				return this.$store.getters.isSchool;
			}
		},
		methods: {
			getStatus(val, type) {
				if (type == 0) {
					return this.statusArr[parseInt(val)].name;
				}
				if (type == 1) {
					return this.statusArr[parseInt(val)].color;
				}
			},
			get_groupList() {
				let success = res => {
					let data = res.data;
					// console.log(data);
					this.groupListData = data.data;
					this.total_number = parseInt(data.data_sum);

					this.loading = false;
					this.groupListData.length === 0 ?
						(this.placeholder = true) :
						(this.placeholder = false);
				};
				this.$ajax({
					url: "/api/group/group_list",
					method: "get",
					params: {
						order_1: this.orderby,
						page: this.page_index,
						length: this.page_size,
						flag: "home",
						create_id: this.$store.getters.userInfo.id,
						status: "1,2,3,4"
					},
					func: {
						success: success
					}
				});
			},
			showcloseDialog(id) {
				this.groupDialogVisible = true;
				this.closeID = id;
			},
			sureCloseGroup() {
				this.change_group_status(this.closeID, 4, this.closeReason);
				this.groupDialogVisible = false;
			},
			openGroup(id) {
				this.change_group_status(id, 1, "")
			},
			removeGroup(id) {
				this.$confirm("确定删除吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						customClass: "confirm-them"
					})
					.then(() => {
						this.change_group_status(id, 0, "");
					})
					.catch(() => {});
			},
			change_group_status(group_id, status, comment) {
				let success = res => {
					this.$message.success(res.msg);
					this.get_groupList();
				};
				this.$ajax({
					url: "/api/group/group_list",
					method: "put",
					data: {
						id: group_id,
						status: status,
						comment: comment,
						do_user: "pesonal"
					},
					func: {
						success: success
					}
				});
			},
			currentChange(val) {
				this.page_index = val;
				this.get_groupList();
			}
		}
	};
</script>
